<template>
  <div class="app-container">
    <vxe-grid
      v-bind="gridOptions"
      align="center"
      :data="bloods"
      :loading="loading"
    >
      <template #form>
        <search :search-fields="searchFields" @queryData="queryData" />
      </template>
      <template #toolbar_buttons>
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="handleCollect"
        >
          自采血液接收
        </el-button>
      </template>
      <template #id="{ row }">
        <el-tag v-if="row.subFrom" type="primary">分装</el-tag>
        <el-tag v-if="row.preFrom" type="success">制备</el-tag>
        <span class="ml4" :class="row.status < 0 ? 'color-danger' : ''">
          {{ row.id }}
        </span>
      </template>
      <template #status="{ row }">
        <el-tag :type="getStatus(row.status, 'type')">
          {{ getStatus(row.status) }}
        </el-tag>
      </template>
      <template #pager>
        <vxe-pager
          :current-page.sync="current_page"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :page-size.sync="per_page"
          :perfect="true"
          :total="total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
    <collect ref="collect" @submit="doCollect" />
  </div>
</template>

<script>
  import { getAll, getCensus } from '@/api/blood'
  import Collect from './components/Collect'
  import Search from '@/components/Search'
  import { removeEmptyField } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      Collect,
      Search,
    },
    data() {
      return {
        bloodGroups: ['A', 'B', 'AB', 'O'],
        bloodRhds: ['阳性', '阴性'],
        searchFields: [],
        bloods: [],
        total: 0,
        current_page: 1,
        per_page: 10,
        loading: true,
        params: {
          page: 1,
          pagesize: 10,
        },
        gridOptions: {
          border: true,
          height: 720,
          resizable: true,
          size: 'small',
          stripe: true,
          keepSource: true,
          printConfig: {},
          importConfig: {},
          exportConfig: {},
          editConfig: {
            trigger: 'click',
            mode: 'row',
            showStatus: true,
          },
          toolbarConfig: {
            size: 'small',
            slots: {
              buttons: 'toolbar_buttons',
            },
            perfect: true,
            print: {
              icon: 'vxe-icon-print',
            },
            custom: true,
          },
          columns: [
            { title: '编号', field: 'idx', type: 'seq', width: 80 },
            {
              title: '血袋号',
              align: 'left',
              field: 'id',
              showOverflow: true,
              sortable: true,
              slots: { default: 'id' },
            },
            {
              title: '血液成分',
              field: 'product.name',
              showOverflow: true,
              sortable: true,
            },
            {
              title: '血型',
              field: 'abo',
              showOverflow: true,
              sortable: true,
              width: 70,
            },
            {
              title: 'Rh(D)',
              field: 'rhd',
              showOverflow: true,
              sortable: true,
              width: 80,
            },
            {
              title: '血量(U)',
              field: 'capacity',
              showOverflow: true,
              sortable: true,
              width: 90,
            },
            {
              title: '采血时间',
              field: 'collect_time',
              showOverflow: true,
              sortable: true,
            },
            {
              title: '失效时间',
              field: 'invalid_time',
              showOverflow: true,
              sortable: true,
            },
            {
              title: '配血试管号',
              field: 'tube_number',
              showOverflow: true,
              sortable: true,
            },
            {
              title: '血源',
              field: 'source',
              showOverflow: true,
              sortable: true,
              width: 70,
            },
            {
              title: '状态',
              field: 'status',
              showOverflow: true,
              sortable: true,
              slots: { default: 'status' },
              width: 100,
            },
            {
              title: '捐血者',
              field: 'blood_user',
              showOverflow: true,
              sortable: true,
              width: 90,
            },
            {
              title: '入库者',
              field: 'created_user',
              showOverflow: true,
              sortable: true,
              width: 90,
            },
            {
              title: '入库时间',
              field: 'created_at',
              showOverflow: true,
              sortable: true,
            },
          ],
        },
      }
    },
    computed: {
      ...mapGetters(['products']),
    },
    created() {
      this.getSearchFields()
      this.getAll()
      this.getCensus()
    },
    methods: {
      getSearchFields() {
        this.searchFields = [
          {
            name: 'id',
            placeholder: '血袋号',
            component: 'input',
            className: 'wd150',
          },
          {
            name: 'product_id_path',
            placeholder: '血液成分',
            component: 'cascader',
            className: 'wd200',
            options: this.products,
            props: { value: 'id', label: 'name' },
          },
          {
            name: 'abo',
            placeholder: '血型',
            component: 'select',
            className: 'wd150',
            options: this.bloodGroups,
            props: {},
          },
          {
            name: 'rhd',
            placeholder: 'Rh(D)',
            component: 'select',
            className: 'wd150',
            options: this.bloodRhds,
            props: {},
          },
          {
            name: 'collect_time',
            placeholder: '采血时间',
            component: 'datepicker',
            className: 'wd200',
          },
          {
            name: 'invalid_time',
            placeholder: '失效时间',
            component: 'datepicker',
            className: 'wd200',
          },
          {
            name: 'created_at',
            placeholder: ['入库开始时间', '结束时间'],
            component: 'datetimepicker',
            className: 'wd360',
            advanced: 1,
          },
          {
            name: 'created_user',
            placeholder: '入库者',
            component: 'input',
            className: 'wd150',
            advanced: 1,
          },
        ]
      },
      handleCollect() {
        this.$refs.collect.show()
      },
      async doCollect(form) {
        console.log(form)
        this.$baseMessage(
          '此功能待待上线时用给定接口数据接入',
          'error',
          'vab-hey-message-error'
        )
      },
      queryData(queryForm) {
        this.params = { page: 1, ...queryForm }
        this.getAll()
        this.getCensus()
      },
      async getAll() {
        this.params.source = '自采'
        const { data, total, per_page, current_page } = await getAll(
          removeEmptyField(this.params)
        )
        this.bloods = data
        this.total = total
        this.per_page = per_page
        this.current_page = current_page
        this.loading = false
      },
      async getCensus() {
        const { data } = await getCensus(removeEmptyField(this.params))
        this.census = data
      },
      handlePageChange({ currentPage, pageSize }) {
        this.params.page = currentPage
        this.params.pagesize = pageSize
        this.getAll()
      },
      getStatus(status, attr = 'name') {
        const statusMap = {
          0: { type: 'success', name: '闲置' },
          '-2': { type: 'danger', name: '出库-制备' },
          '-1': { type: 'danger', name: '出库-分装' },
        }
        return statusMap[status][attr]
      },
    },
  }
</script>

<style lang="scss" scoped></style>
